<nz-card [nzTitle]="nzTitleTemplate" [nzExtra]="extraTemplate">
  <ng-template #nzTitleTemplate>
    <ellipsis lines="1" style="width: 400px">
      <i class="anticon anticon-team"></i>
      <span *ngIf="organizationUnit">{{organizationUnit.title}}</span>
      <span *ngIf="!organizationUnit">{{l("Users")}}</span>
    </ellipsis>
  </ng-template>
  <ng-template #extraTemplate>
    <ng-container *ngIf="organizationUnit">
      <ng-container *ngIf="isGranted('Pages.Administration.OrganizationUnits.ManageUsers')">
        <a (click)="addUser()">
          <i class="anticon anticon-plus"></i> {{l("AddUser")}}
        </a>
        <nz-divider nzType="vertical"></nz-divider>
      </ng-container>
      <ng-container *ngIf="isGranted('Pages.Administration.OrganizationUnits.ManageUsers')">
        <a (click)="batchDelete()">
          <i class="anticon anticon-delete"></i> {{l("BatchDelete")}}
        </a>
        <nz-divider nzType="vertical"></nz-divider>
      </ng-container>
      <a class="ml-sm">
        <i class="anticon anticon-reload" nz-tooltip [nzTitle]="l('Refresh')" (click)="clearFilterAndRefresh()"></i>
      </a>
    </ng-container>
  </ng-template>

  <ng-container *ngIf="organizationUnit">
    <!-- 检索表单 -->
    <form nz-form [nzLayout]="'vertical'" (ngSubmit)="refresh()" autocomplete="off">
      <nz-form-control>
        <nz-input-group nzSearch [nzSuffix]="suffixButton">
          <input type="text" nz-input [(ngModel)]="filterText" (keyup.enter)="refresh()" name="filterText"
            [placeholder]="l('SearchWithThreeDot')">
          <ng-template #suffixButton>
            <button nz-button nzType="primary" nzSearch type="submit">
              <i class="anticon anticon-search"></i>
            </button>
          </ng-template>
        </nz-input-group>
      </nz-form-control>
    </form>
    <div class="my-md">
      <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
        <ng-template #message>
          <span [innerHTML]="l('GridSelectedXItemsTips',selectedDataItems.length)"></span>
          <a (click)="restCheckStatus(dataList)" class="ml-md">
            {{l('ClearEmpty')}}
          </a>
        </ng-template>
      </nz-alert>
    </div>
    <nz-row class="my-md">
      <nz-table #ajaxTable [nzFrontPagination]="false" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true" [nzData]="dataList"
        [nzTotal]="totalItems" [nzLoading]="isTableLoading" [(nzPageIndex)]="pageNumber" [(nzPageSize)]="pageSize"
        (nzPageIndexChange)="refresh()" (nzPageSizeChange)="refresh()" [nzNoResult]="noDataTemplate" [nzShowTotal]="showTotalTemplate">
        <!-- 暂无数据 -->
        <ng-template #noDataTemplate>
          <no-data></no-data>
        </ng-template>
        <!-- 分页信息显示 当前 1 页/共 3 页，共 5 条/显示 1-2 条 -->
        <ng-template #showTotalTemplate let-total let-range="range">
          {{l('GridFooterDisplayText',pageNumber,totalPages,total,range[0],range[1])}}
        </ng-template>
        <!-- 表头 -->
        <thead (nzSortChange)="gridSort($event)">
          <tr>
            <th nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckboxDisabled" [nzIndeterminate]="checkboxIndeterminate"
              (nzCheckedChange)="checkAll($event)"></th>
            <th nzWidth="150px" class="text-center">
              <span>{{l('Actions')}}</span>
            </th>
            <th nzShowSort nzSortKey="userName">
              <span>{{l('UserName')}}</span>
            </th>
            <th nzShowSort nzSortKey="addedTime" class="text-center">
              <span>{{l('AddedTime')}}</span>
            </th>
          </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
          <tr *ngFor="let item of ajaxTable.data">
            <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshCheckStatus(dataList)"></td>
            <td class="text-center">
              <!-- 删除 -->
              <ng-container *ngIf="isGranted('Pages.Administration.OrganizationUnits.ManageUsers')">
                <nz-popconfirm [nzTitle]="l('RemoveUserFromOuWarningMessage',item.userName,organizationUnit.title)"
                  (nzOnConfirm)="removeMember(item)" [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')">
                  <a nz-popconfirm>
                    <i class="anticon anticon-delete mr-sm"></i>
                    <span>{{l('Delete')}}</span>
                  </a>
                </nz-popconfirm>
              </ng-container>
            </td>
            <td>
              {{item.userName}}
            </td>
            <td class="text-center">
              {{item.addedTime|_date}}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-row>
  </ng-container>

  <div class="text-center" *ngIf="!organizationUnit">
    <no-data [text]="l('SelectAnOrganizationUnitToSeeMembers')"></no-data>
  </div>
</nz-card>
